<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>040-粘性定位-例子2</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				height: 3000px;
			}

			.header {
				height: 100px;
				background-color: aquamarine;
			}

			.content {
				height: 300px;
				overflow-y: auto;
				border: 6px solid #ccc;
			}

			.item {
				border-bottom: 4px dashed red;
			}

			.sticky {
				height: 50px;
				line-height: 50px;
				background-color: pink;
				text-align: center;
				font-size: 40px;
				position: sticky;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">HEADER</div>
			<div class="content">
				<!-- .sticky 元素，会随着 .item 元素，一起被滚动走。 -->
				<div class="item">
					<div class="sticky">A</div>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
					<h1>A</h1>
				</div>
				<div class="item">
					<div class="sticky">B</div>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
					<h1>B</h1>
				</div>
				<div class="item">
					<div class="sticky">C</div>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
					<h1>C</h1>
				</div>
			</div>
		</div>
	</body>
</html>
